.export-qrcode {
  display: inline-block;
}
.export-qrcode-image,
.qrcode-image {
  display: none;
  width: 160px;
  height: 160px;
  position: absolute;
  background: white;
  box-shadow: var(--shadow-light);
  svg {
    width: 100%;
    height: 100%;
  }
}
.export-qrcode-image {
  right: 0;
}
.export-qrcode:hover .export-qrcode-image,
.qrcode:hover .qrcode-image {
  display: block;
}

.export-break {
  height: 1px;
  background: #B0B0B0;
}

.copyable-text {
  cursor: pointer;
  &:hover {
    background: $gray-lightest;
    box-shadow: 0px 0px 4px 4px $gray-lightest;
  }
}

.mail-card .card-header {
  cursor: pointer;
}

dialog {
  border: none;
  background: #fff;
  padding: 0;
  box-shadow: var(--shadow-dialog);
  border-radius: 0.3rem;
  opacity: 0;
  max-width: 70vw;

  &[open] {
    opacity: 1;
    animation: fade-in 0.3s ease-out;
    /* dialogs are supposed to auto-centre on the page
     * and I can't be arsed to debug why they aren't */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
  }

  &,
  &:focus-visible,
  a:focus-visible,
  button:focus-visible {
    border: none;
    outline: none;
  }
  &::backdrop {
    background-color: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(2px);
  }

  /* Special treatment for dialogs that are just there to show an alert box */
  & > .alert {
    margin: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

a[data-lightbox] img,
img[data-lightbox],
dialog#lightbox-dialog img {
  box-shadow: var(--shadow-lighter);
}
a[data-lightbox] img:hover,
img[data-lightbox]:hover {
  box-shadow:
    0 2px 5px rgb(0 0 0 / 0.25),
    0 3px 5px rgb(0 0 0 / 0.22);
}

dialog#lightbox-dialog {
  .modal-card-content {
    padding: 20px;

    img {
      object-fit: contain;
      max-height: 80vh;
      max-width: 80vw;
      height: 100%;
      width: 100%;
    }
    #lightbox-close {
      position: absolute;
      top: -4px;
      right: 0;
      cursor: pointer;
      color: rgb(0 0 0 / 0.7);
      font-size: 20px;
      border: none;
      background: transparent;
    }
  }
}

.state-fragment {
  white-space: nowrap;
}

.list-group .logentry.list-group-item {
  display: flex;
  flex-direction: column;
  .time {
    color: var(--color-text-muted);
  }
  span i.fa {
    padding-right: 4px;
  }
}

.submission-state-deleted,
.submission-state-withdrawn,
.submission-state-canceled {
  --submission-color-primary: var(--color-grey);
  --submission-color-secondary: var(--color-grey);
  --highlight-color: var(--color-grey);
  --highlight-color-text: var(--color-grey);
}
.submission-state-dropdown.submission-state-pending-deleted,
.submission-state-dropdown.submission-state-pending-withdrawn,
.submission-state-dropdown.submission-state-pending-canceled {
  --submission-color-secondary: var(--color-grey);
}

.submission-state-submitted,
.submission-state-review {
  --submission-color-primary: var(--color-info);
  --submission-color-secondary: var(--color-info);
  --highlight-color: var(--color-info);
  --highlight-color-text: var(--color-info-dark);
}
.submission-state-dropdown.submission-state-pending-submitted {
  --submission-color-secondary: var(--color-info);
}

.submission-state-accepted {
  --submission-color-primary: var(--color-primary);
  --submission-color-secondary: var(--color-primary);
  --highlight-color: var(--color-success);
  --highlight-color-text: var(--color-success-dark);
}
.submission-state-dropdown.submission-state-pending-accepted {
  --submission-color-secondary: var(--color-primary);
}

.submission-state-confirmed {
  --submission-color-primary: var(--color-primary-text);
  --submission-color-secondary: var(--color-primary-text);
  --highlight-color: var(--color-success);
  --highlight-color-text: var(--color-success-dark);
}
.submission-state-dropdown.submission-state-pending-confirmed {
  --submission-color-secondary: var(--color-primary-text);
}

.submission-state-rejected {
  --submission-color-primary: var(--color-danger);
  --submission-color-secondary: var(--color-danger);
  --highlight-color: var(--color-danger);
  --highlight-color-text: var(--color-danger);
}
.submission-state-dropdown.submission-state-pending-rejected {
  --submission-color-secondary: var(--color-danger);
}

.badge.submission-state {
  background-color: var(--submission-color-primary);
}
